<!-- 抽奖规则弹窗组件 -->
<!--XXX 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="true">
    <div class="container">
      <!-- 规则 -->
      <div class="rule-dialog">
        <!-- 标题 -->
        <div class="title">
          <image
            class="title-img"
            src="https://ustatic.hudongmiao.com/joymew-host-contest/lottery-rule-title.png"
            alt=""
          />
        </div>
        <!-- 内容 -->
        <div class="content">
          <text>1.500喵豆可以抽奖一次</text>
          <text>
            2.邀请好友参与这次活动，成功邀请一位获得50喵豆，若邀请的用户没有用过我们嗨喵悦动大屏，成功邀请将获得500喵豆。
          </text>
          <text>3.完成实名认证、绑定支付宝均可获得喵豆</text>
          <text>
            4.使用嗨喵悦动大屏创建活动，在婚礼现场使用我们大屏玩红包雨游戏、转一转、扭一扭小游戏、幸运小转盘小游戏、开宝箱游戏、红包墙游戏都可以获得喵豆具体获得喵豆的方法可点击下方按钮，去做任务页查看
          </text>
        </div>
        <!-- 查看任务页按钮 -->
        <div
          class="task-btn"
          @click="goToGetMiaodou"
        >
          查看任务页
        </div>
      </div>
      <!-- 关闭按钮 -->
      <div
        class="close-btn"
        @click="close"
      >
        <image
          class="close-btn-img"
          src="@/static/icons/common/close.png"
          alt=""
        />
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useLottery } from '../../stores/lottery';

const { popupType } = storeToRefs(useLottery());
const close = () => {
  popupType.value = 'no';
};

const goToGetMiaodou = () => {
  uni.redirectTo({ url: '/subpkg/get-miaodou/get-miaodou' });
};
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template:
    "ruleDialog" auto
    "closeBtn" 48px;
  row-gap: 20px;
  justify-items: center;

  .rule-dialog {
    grid-area: ruleDialog;

    width: calc(73.8462vw - 20px);

    background-color: #fff;
    border-radius: 16px;

    padding: 10px 20px;
    display: grid;
    grid-template:
      "title" 20px
      "content" auto
      "taskBtn" 48px;
    row-gap: 20px;
    align-items: center;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;

      width: 202px;
      height: 20px;

      .title-img {
        width: 100%;
        height: 100%;
      }
    }

    // 内容
    .content {
      grid-area: content;

      overflow: scroll;
      overflow-x: hidden;

      display: flex;
      flex-direction: column;

      font-size: 15px;
      line-height: 27px;
      color: #333;
      text-align: justify;

      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }
    }

    // 查看任务页按钮
    .task-btn {
      grid-area: taskBtn;

      width: 240px;
      height: 36px;

      background: #ff2459;
      border-radius: 34px;

      font-size: 15px;
      font-weight: 500;
      line-height: 36px;
      color: #fff;
      text-align: center;
    }
  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
